<template>
  <!-- style="text-align: center" -->
  <div class="app-container" v-loading="loading">

    <el-tabs type="border-card"  v-model="type">
      <el-tab-pane name="recharge" label="单笔充值">
        <div>
          <el-input placeholder="请输入手机号"  maxlength="11" v-model="form.mobile" clearable
            style="width: 250px; margin: 0 auto" :autofocus="true">
          </el-input>
        </div>
        <div style="margin: 20px auto">
          <span style="color: #f56c6c; font-weight: bold"
            v-if="!info.phone_info || !info.phone_info.province">输入手机号自动匹配运营商</span>
          <span v-else style="color: #67c23a; font-weight: bold">{{
            info.phone_info.province +
            "-" +
            info.phone_info.city +
            "-" +
            info.phone_info.isp
            }}</span>
        </div>
        <div>
          <el-select v-model="form.recharge_type" class="m-2" placeholder="请选择" size="large"
            style="width: 250px; margin: 0 auto" @change="typeChange">
            <el-option label="话费" :value="1" />
            <el-option label="流量" :value="2" />
          </el-select>
        </div>
        <div class="con">
          <div class="productList">
            <div class="pWrap" v-for="item in info.product_list" :key="item.id">
              <h4>{{ item.name }}</h4>
              <div class="wrap">
                <el-card class="box-card item" v-for="item2 in item.spec" :key="item2.id" @click="onItem(item, item2)">
                  <div>面值：{{ item2.face_value }}</div>
                  <div class="c_red">采购价：{{ item2.user_price }}</div>
                  <div class="c_red">公众号售价：{{ item2.sale_price }}</div>
                  <span class="tag">{{ item2.goods_tag }}</span>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane name="follow" label="填充归属地">
        <h3 style="color: red;">添加前请确保手机号，城市和运营商的正确匹配</h3>
        <el-form ref="phoneFormRef" :rules="phoneFormRules" :model="phoneForm" label-width="auto"
          style="max-width: 600px">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="phoneForm.phone" placeholder="输入11位手机号，确保输入正确" />
          </el-form-item>
          <el-form-item label="所属城市" prop="city">
            <el-input v-model="phoneForm.city" placeholder="例如：深圳市填写深圳即可" />
          </el-form-item>
          <el-form-item label="运营商" prop="isp">
            <el-radio-group v-model="phoneForm.isp">
              <el-radio-button value="移动">移动</el-radio-button>
              <el-radio-button value="联通">联通</el-radio-button>
              <el-radio-button value="电信">电信</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Plus" @click="addArea">添加</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>
    </el-tabs>



    <el-dialog title="产品详情" v-model="isShowDetail" width="600px" append-to-body :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form :model="pwdForm" ref="pwdForm" :rules="pwdFormRule" label-width="100px" @submit.prevent="pwdSubmit">
        <el-form-item label="产品" prop="cate_name">
          <span>{{ curInfo.cate_name }}</span>
        </el-form-item>
        <el-form-item label="面值" prop="face_value">
          <span>{{ curInfo.face_value }}</span>
        </el-form-item>
        <el-form-item label="采购价" prop="user_price">
          <span class="c_red">{{ curInfo.user_price }}</span>
        </el-form-item>
        <el-form-item label="第一个验证码" prop="code1" v-if="curInfo.is_need_code > 0">
          <el-input placeholder="请输入验证码" v-model="pwdForm.code1" type="number"
            :maxlength="curInfo.code1_len"></el-input>
          <el-button size="small" :disabled="!!timer1" type="primary" @click="sendCode1">{{ btnText1 }}</el-button>
          <el-button size="small" type="success" :disabled="isValidate" @click="validateCode1"
            v-if="curInfo.is_need_code == 2 && isSendCode1">验证</el-button>
        </el-form-item>
        <el-form-item label="第二个验证码" prop="code2" v-if="curInfo.is_need_code == 2 && isValidate">
          <el-input placeholder="请输入第二个验证码" v-model="pwdForm.code2" type="number"
            :maxlength="curInfo.code2_len"></el-input>
          <el-button size="small" type="primary" :disabled="!!timer2" @click="sendCode2">{{ btnText2 }}</el-button>
        </el-form-item>
        <div v-if="curInfo.is_need_code == 2" class="p_tip">
          <el-alert center show-icon title="（注：请先获取第一个验证码并进行验证，验证后在获取第二个验证码输入提交即可，验证码需要时间，请耐心等待！如有疑问，请联系客服咨询！）"
            type="error" />
        </div>
        <div v-if="curInfo.is_need_code == 1" class="p_tip">
          <el-alert center show-icon title="（注：请获取验证码，再输入提交即可，验证码需要时间，请耐心等待！如有疑问，请联系客服咨询！）" type="error" />
        </div>
        <el-scrollbar height="100px">
          <div class="rich" v-html="curInfo.detail"></div>
        </el-scrollbar>
        <el-form-item label="密码" prop="password">
          <el-input v-model="pwdForm.password" placeholder="请输入密码" type="password" show-password auto-complete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" @click.prevent="pwdSubmit">确定充值</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
const timeCount = 60;

import { getProductList, singleMobileRecharge } from "@/api/platform/czProductSpec";
import { sendCode, validateCode,setPhone } from "@/api/platform/czOrder";
// import fs from "file-saver";
import { ElLoading } from "element-plus";

export default {
  name: "platformrechargeindex",
  data() {
    return {
      type: "recharge",
      phoneForm: {
        isp: "",
        phone: "",
        city: ""
      },
      phoneFormRules: {
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { max: 11, message: "手机号码最多11位数", trigger: "blur" },
        ],
        isp: [{ required: true, message: "请选择运营商", trigger: "blur" }],
        city: [{ required: true, message: "输入城市", trigger: "blur" }],
      },
      timer1: null,
      isSendCode1: false,
      time1Count: timeCount,
      btnText1: "发送",
      btnText2: "发送",

      btnText2: "发送",
      timer2: null,
      time2Count: timeCount,
      isSendCode2: false,

      sendCodeData: {},

      isValidate: false,
      isShowDetail: false,
      autofocus: false,
      info: {
        phone_info: {},
        product_list: [],
      },
      rechargeTypeList: [
        {
          name: "话费",
          id: 1,
        },
        {
          name: "流量",
          id: 2,
        },
      ],
      moreRechargeInfo: {},
      moreRecharge: false,
      pwdForm: {
        password: "",
        code1: "",
        code2: "",
      },
      pwdFormRule: {
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      isShowPwd: false,
      isMoreSubmitIng: false,
      splitCount: 10, // 上传分段数
      curTableDate: [],
      totalCount: 0,
      pageNum: 1,
      pageSize: 10,
      isUploadIng: false,
      limitNum: 1,
      fileList: [],
      extData: {},
      uploadUrlExcel: "",
      isShowUpload: false,
      propList: [
        {
          label: "序号",
          prop: "idx",
        },
        {
          label: "手机号",
          prop: "mobile",
        },
        {
          label: "面值",
          prop: "face_value",
        },
        {
          label: "订单号",
          prop: "user_order_sn",
        },
        {
          label: "信息",
          prop: "info",
        },
      ],
      tableData: [],
      tableLoading: false,
      // 遮罩层
      loading: false,
      showErrMsg: false,
      showOkMsg: false,
      errMsg: undefined,
      okMsg: undefined,
      form: {
        mobile: undefined,
        recharge_type: 1,
        spec_id: undefined,
      },
      form2: {
        isp: undefined,
        product_id: undefined,
        batch_order_sn: undefined,
      },
      productList: [],
      productList2: [],
      specList: [],
      // 表单校验
      rules: {
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { max: 11, message: "手机号码最多11位数", trigger: "blur" },
        ],
        recharge_type: [
          { required: true, message: "请选择产品", trigger: "blur" },
        ],
        spec_id: [{ required: true, message: "请选择面值", trigger: "blur" }],
      },
      rules2: {
        isp: [{ required: true, message: "请选择运营商", trigger: "blur" }],
        product_id: [
          { required: true, message: "请选择产品", trigger: "blur" },
        ],
        batch_order_sn: [
          { required: true, message: "请输入批量订单号", trigger: "blur" },
        ],
      },
      productList: [],
    };
  },
  watch: {
    "form.mobile": function (val, old_val) {
      // this.getProductList();
      if (val?.length == 11) {
        this.getProductList();
      }
      if (!val) {
        this.getProductList();
      }
    },
  },
  created() {
    this.getProductList();
  },
  methods: {
    async getProductList() {
      const params = {
        ...this.form,
        type: this.form.recharge_type,
      };
      const { data } = await getProductList(params);
      this.info = data;
    },
    addArea(){
      // phoneFormRef
      this.$refs.phoneFormRef.validate(async valid=>{
        if(valid){
          const params = {
            isp: this.phoneForm.isp,
            city: this.phoneForm.city,
            mobile: this.phoneForm.phone,
          };
          await setPhone(params)
          this.$message.success("添加成功");
          this.phoneForm = {
            mobile:"",
            isp:"",
            city:""
          }
        }
      })
    },
    onItem(item, item2) {
      if (!this.form.mobile || this.form.mobile.length != 11) {
        this.autofocus = true;
        return this.$message.error("请输入正确的手机号");
      }
      this.curInfo = item2;
      this.curInfo.cate_name = item.name;
      this.curInfo.cate_id = item.id;
      this.isShowDetail = true;
      // 重制表单
      this.isSendCode1 = false;
      this.isSendCode2 = false;
      this.isValidate = false;
      this.pwdForm.code1 = "";
      this.pwdForm.code2 = "";
    },
    // 发送1
    async sendCode1() {
      if (this.form.mobile.length !== 11) {
        this.$message.error("请输入正确的手机号");
        return false;
      }

      const loadingInstance = ElLoading.service({
        fullscreen: true,
        text: "发送中，请耐心等待...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const params = {
        spec_id: this.curInfo.id,
        mobile: this.form.mobile,
        type: 1,
      };
      // this.isValidateIng = true;
      try {
        const { data } = await sendCode(params);
        console.log("data", data);
        this.sendCodeData = data;

        this.$message.success("发送成功");
        // setTimeout(()=>{
        this.isSendCode1 = true;
        // uni.hideLoading();
        // this.btnText1 = this.time1Count+'s'
        // 开始计时
        this.timer1 = setInterval(() => {
          if (this.time1Count <= 0) {
            clearInterval(this.timer1);
            this.time1Count = timeCount;
            this.timer1 = null;
            this.btnText1 = "发送";
          } else {
            this.time1Count--;
            this.btnText1 = this.time1Count + "s";
          }
        }, 1000);
      } finally {
        // this.isValidateIng = false;
        loadingInstance.close();
      }
    },
    typeChange(e) {
      console.log(e);
      this.getProductList();
      // if (this.form.mobile.length == 11 || !this.form.mobile) {
      //   this.getProductList();
      // }
    },
    async validateCode1() {
      console.log("validateCode1");
      if (this.isValidate) {
        this.$message.error("已经验证过");
        return false;
      }
      if (!this.isSendCode1) {
        this.$message.error("请先发送验证码");
        return false;
      }
      if (!this.pwdForm.code1) {
        this.$message.error("请输入验证码");
        return false;
      }
      const params = {
        mobile: this.form.mobile,
        code: this.pwdForm.code1,
        spec_id: this.curInfo.id,
      };
      // 附带发码返回的参数
      params["sendCodeData"] = this.sendCodeData;
      const loadingInstance = ElLoading.service({
        fullscreen: true,
        text: "请耐心等待...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        const { data } = await validateCode(params);
        this.$message.success("验证成功,请发送第二个验证码");
        // setTimeout(()=>{
        this.isValidate = true;
        // uni.hideLoading();
        // this.btnText1 = this.time1Count+'s'
        // 开始计时
        // this.timer2 = setInterval(() => {
        //   if (this.time2Count <= 0) {
        //     clearInterval(this.timer2);
        //     this.time2Count = timeCount;
        //     this.timer2 = null;
        //     this.btnText2 = "发送";
        //   } else {
        //     this.time2Count--;
        //     this.btnText2 = this.time2Count + "s";
        //   }
        // }, 1000);
      } finally {
        loadingInstance.close();
        // this.isValidateIng = false;
      }
    },
    // 发送2
    async sendCode2() {
      if (this.timer2) {
        this.$message.error("请" + this.time2Count + "s后在发送");
        return false;
      }
      if (!this.isValidate) {
        this.$message.error("请先验证");
        return false;
      }

      const loadingInstance = ElLoading.service({
        fullscreen: true,
        text: "发送中，请耐心等待...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const params = {
        mobile: this.form.mobile,
        type: 2,
        spec_id: this.curInfo.id,
      };
      // 附带发码返回的参数
      params["sendCodeData"] = this.sendCodeData;
      // this.isValidateIng = true;
      try {
        const { data } = await sendCode(params);
        // Toast.clear();
        this.$message.success("发送成功");
        // setTimeout(()=>{
        this.isSendCode2 = true;
        // uni.hideLoading();
        // this.btnText1 = this.time1Count+'s'
        // 开始计时
        this.timer2 = setInterval(() => {
          if (this.time2Count <= 0) {
            clearInterval(this.timer2);
            this.time2Count = timeCount;
            this.timer2 = null;
            this.btnText2 = "发送";
          } else {
            this.time2Count--;
            this.btnText2 = this.time2Count + "s";
          }
        }, 1000);
      } finally {
        loadingInstance.close();
        // this.isValidateIng = false;
      }
    },
    pwdSubmit() {
      console.log("pwdSubmit");
      this.$refs.pwdForm.validate(async (valid) => {
        if (valid) {
          const params = {
            pwd: this.pwdForm.password,
            cate_id: this.curInfo.cate_id,
            spec_id: this.curInfo.id,
            mobile: this.form.mobile,
          };
          this.form.password = this.pwdForm.password;
          const codeNum = this.curInfo.is_need_code;
          if (codeNum == 1) {
            if (!this.isSendCode1) {
              this.$message.error("请先发送第一个验证码");
              return false;
            }
            if (!this.pwdForm.code1) {
              // this.$toast("请输入第一个验证码");
              this.$message.error("请输入第一个验证码");
              return false;
            }
            if (this.pwdForm.code1.length < 4) {
              this.$message.error(
                "请输入" + this.curInfo.code1_len + "位长度的验证码"
              );
              return false;
            }
            params.code = this.pwdForm.code1;
          }
          if (codeNum == 2) {
            if (!this.isSendCode1) {
              this.$message.error("请先发送第一个验证码");
              return false;
            }
            if (!this.isValidate) {
              this.$message.error("请先验证");
              return false;
            }

            if (!this.pwdForm.code1) {
              this.$message.error("请输入第一个验证码");
              return false;
            }
            if (!this.isSendCode2) {
              this.$message.error("请先发送第二个验证码");
              return false;
            }
            if (!this.pwdForm.code2) {
              this.$message.error("请输入第二个验证码");
              return false;
            }

            if (this.pwdForm.code2.length < 4) {
              // 最少4位
              this.$message.error(
                "请输入" + this.curSpec.code2_len + "位长度的验证码"
              );
              return false;
            }
            params.code = this.pwdForm.code2;
          }

          const loadingInstance = ElLoading.service({
            fullscreen: true,
            text: "发送中，请耐心等待...",
            background: "rgba(0, 0, 0, 0.7)",
          });
          params.sendCodeData = this.sendCodeData;
          singleMobileRecharge(params)
            .then((response) => {
              this.reset();
              this.$alert(response.msg, "下单提示", {
                center: true,
                dangerouslyUseHTMLString: true,
                callback: (action) => {
                  console.log(action);
                  this.isShowDetail = false;
                  this.pwdForm.password = "";
                },
              });
            })
            .finally((response) => {
              // this.isShowDetail = false;
              this.pwdForm.password = "";
              loadingInstance.close();
            });
        }
      });
    },
    async clearData() {
      const alertRes = await this.$confirm("确定要清空吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      console.log(alertRes);
      if (alertRes == "confirm") {
        this.tableData = [];
        this.curTableDate = [];
      }
    },
    getProduct() {
      this.loading = true;
      this.productList = [];
      this.specList = [];
      getProductByMobile({ mobile: this.form.mobile })
        .then((response) => {
          this.productList = response.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleProductChange(row) {
      let product_id = row;
      let find_product = this.productList.find(function (ele, idx, oriArr) {
        return product_id === ele.id;
      });
      this.form.spec_id = undefined;
      this.specList = [];
      if (find_product) {
        this.specList = find_product.specs;
      }
    },
    //根据运营商查询产品
    handleIspChange(isp) {
      this.productList2 = [];
      this.form2.product_id = undefined;
      this.loading = true;
      if (isp === undefined || isp == "") {
        this.loading = false;
        return;
      }
      getProductByIsp({ isp: this.form2.isp })
        .then((response) => {
          this.productList2 = response.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    singleSubmit() {
      if (this.form.mobile.length != 11) {
        this.$alert("号码格式有误", "错误提示", { center: true });
        return false;
      }
      this.moreRecharge = false;
      this.isShowPwd = true;
    },
    async mutiSubmit() {
      if (this.tableData.length > 5000) {
        this.$message.warning("一次不要超过5000条记录");
        return;
      }
      //检查面值
      let product_id = this.form2.product_id;
      let batch_order_sn = this.form2.batch_order_sn;
      if (!product_id) {
        this.$message.warning("请选择产品");
        return;
      }
      if (!batch_order_sn) {
        this.$message.warning("输入批量订单号以便后续查询");
        return;
      }
      let find_product = this.productList2.find(function (ele, idx, oriArr) {
        return product_id === ele.id;
      });
      let face_value_list = [];
      let spec_list = {};
      find_product.specs.forEach((item, idx) => {
        face_value_list.push(item.face_value);
        spec_list[item.face_value] = item;
      });
      let has_err = 0;
      let err_msg = "";
      try {
        this.tableData.forEach((item, idx) => {
          let face_value = item.face_value;
          let mobile = item.mobile;
          if (mobile.toString().trim().length != 11) {
            has_err = 1;
            err_msg = "号码：" + item.mobile + "，格式有误";
            throw new Error(err_msg);
          }
          if (face_value_list.indexOf(face_value.toString()) === -1) {
            has_err = 1;
            err_msg = "号码：" + item.mobile + "不存在面值：" + face_value;
            throw new Error(err_msg);
          }
          if (!item.user_order_sn) {
            has_err = 1;
            err_msg = "号码：" + item.mobile + "，没有订单号";
            throw new Error(err_msg);
          }
        });
      } catch (e) {
        //TODO handle the exception
        console.log(e);
        this.$message.warning(err_msg);
        return;
      }

      // 弹窗输入密码
      this.moreRecharge = true;
      this.isShowPwd = true;
      this.moreRechargeInfo = {
        batch_order_sn: batch_order_sn,
        spec_list: spec_list,
      };
      return false;
    },
    filterNum(arr = [], number) {
      let newArr = [];
      for (let i = 0; i < arr.length;) {
        newArr.push(arr.slice(i, (i += number)));
      }
      return newArr;
    },
    reset() {
      this.form = {
        mobile: undefined,
        spec_id: undefined,
      };
      this.curInfo = {};
      this.pwdForm = {};
      this.getProductList();
      // this.productList = [];
      // this.specList = [];
      this.resetForm("form");
    },
    exceedFile() {
      this.$message.warning(`只能选择${this.limitNum}个文件`);
    },
    uploadFile() {
      if (!this.fileList.length) {
        this.$message.warning("请上传文件");
        return false;
      }
      console.log(this.fileList);
      this.isUploadIng = true;
      this.tableLoading = true;
      this.importFile(this.fileList[0]);
    },
    importFile(obj) {
      //获得选择的文件对象
      var f = obj;
      //初始化新的文件读取对象，浏览器自带，不用导入
      var reader = new FileReader();
      //绑定FileReader对象读取文件对象时的触发方法
      const _this = this;
      reader.onload = function (e) {
        //获取文件二进制数据流
        var data = e.currentTarget.result;
        //利用XLSX解析二进制文件为xlsx对象
        var wb = XLSX.read(data, { type: "binary", codepage: 936 });
        //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
        //wb.Sheets[Sheet名]获取第一个Sheet的数据
        var j_data = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
          header: 1,
        });

        if (j_data.length > 501) {
          _this.$message.warning("不要超过500行");
          _this.tableLoading = false;
          _this.fileList = [];
          _this.isUploadIng = false;
          return;
        }

        _this.tableData = _this.handleExcelData(j_data);
        _this.pageNum = 1;
        _this.pageSize = 10;
        _this.totalCount = _this.tableData.length;
        _this.getInfo({ page: _this.pageNum, limit: _this.pageSize });
        _this.tableLoading = false;
        _this.isShowUpload = false;
        _this.fileList = [];
        _this.isUploadIng = false;
      };
      //6.使用reader对象以二进制读取文件对象f，
      reader.readAsBinaryString(f);
    },
    getInfo({ page, limit }) {
      this.curTableDate = this.tableData.slice(
        (page - 1) * limit,
        page * limit
      );
    },
    handleExcelData(data) {
      console.log("handleExcelData", data);
      const newDate = [...data];
      newDate.splice(0, 1);
      const tableData = [];
      newDate.forEach((item, idx) => {
        // 有号码才充值
        if (item[0]) {
          const obj = {
            idx: idx + 1,
            mobile: item[0],
            face_value: item[1],
            user_order_sn: item[2],
            info: "未提交",
          };
          tableData.push(obj);
        }
      });
      console.log("tableData", tableData, tableData.length);
      return tableData;
    },
    fileChange(file, fileList) {
      this.fileList = [file.raw];
    },
    removeFile(file, fileList) {
      this.fileList = fileList;
    },
    beforeUploadFile(file) {
      const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      const size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    readExcel() {
      this.isShowUpload = true;
    },
    exportExcel() {
      var newData = [];
      this.tableData.forEach((item, idx) => {
        const obj = {
          序号: item["idx"],
          手机号: item["mobile"].toString(),
          面值: item["face_value"],
          订单号: item["user_order_sn"].toString(),
          信息: item["info"],
        };
        newData.push(obj);
      });

      let filename = "批量充值-" + this.parseTime(new Date().getTime());
      let sheetName = "批量充值";

      let wb = XLSX.utils.book_new();
      let ws = XLSX.utils.json_to_sheet(newData, {
        header: Object.values({
          idx: "序号",
          mobile: "手机号",
          face_value: "面值",
          user_order_sn: "订单号",
          info: "信息",
        }),
      });

      wb.SheetNames.push(sheetName);
      wb.Sheets[sheetName] = ws;
      let wopts = {
        bookType: "xlsx",
        bookSST: false,
        type: "binary",
        cellStyles: true,
        // defaultCellStyle: defaultCellStyle,
        showGridLines: false,
      }; //写入的样式
      let wbout = XLSX.write(wb, wopts);
      let blob = new Blob([this.s2ab(wbout)], {
        type: "application/octet-stream",
      });
      fs.saveAs(blob, filename + ".xlsx");
    },
    s2ab(s) {
      if (typeof ArrayBuffer !== "undefined") {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
    },
    downloadTemplate() {
      window.open(
        (process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.origin) + "/template.xlsx",
        "_blank"
      );
    },
  },
};
</script>

<style scoped>
.con {
  width: 100%;
  /* margin: 30px auto;
    display: flex;
    justify-content: center; */
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

.productList {
  /* display: flex; */
  text-align: left;
}

.item {
  padding: 0 40px;
  border-radius: 10px;
  border: 1px solid #dbdbdb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 30px;
  padding-bottom: 10px;
  margin-right: 30px;
}

.tag {
  position: absolute;
  left: 0;
  top: 0;
  background: #67c23a;
  color: #fff;
  padding: 0px 20px;
  border-radius: 10px 10px 10px 10px;
  font-size: 14px;
}

.c_red {
  color: #f56c6c;
  font-weight: bold;
}
</style>